<template>
    <div>
        <template>
            <v-container fluid grid-list-md>
                <v-layout wrap>
                    <v-flex d-flex xs12 sm6 md4>
                        <v-card color="purple" dark>
                            <v-card-title primary class="title">Lorem</v-card-title>
                            <v-card-text>{{ lorem }}</v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex d-flex xs12 sm6 md3>
                        <v-layout wrap>
                            <v-flex d-flex>
                                <v-card color="indigo" dark>
                                    <v-card-text>{{ lorem.slice(0, 70) }}</v-card-text>
                                </v-card>
                            </v-flex>
                            <v-flex d-flex>
                                <v-layout wrap>
                                    <v-flex
                                            v-for="n in 2"
                                            :key="n"
                                            d-flex
                                            xs12
                                    >
                                        <v-card
                                                color="red lighten-2"
                                                dark
                                        >
                                            <v-card-text>{{ lorem.slice(0, 40) }}</v-card-text>
                                        </v-card>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex d-flex xs12 sm6 md2 child-flex>
                        <v-card color="green lighten-2" dark>
                            <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex d-flex xs12 sm6 md3>
                        <v-card color="blue lighten-2" dark>
                            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </template>
        <template>
            <v-container fluid>
                <v-layout wrap>
                    <v-flex
                            pa-1
                    >
                        <v-card
                                dark
                                color="green darken-3"
                        >
                            <v-card-text>I'm a Flex that will grow and shrink (default behavior)</v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex
                            pa-1
                    >
                        <v-card
                                dark
                                color="green darken-1"
                        >
                            <v-card-text>I'm a Flex that will grow and shrink (default behavior)</v-card-text>
                        </v-card>
                    </v-flex>
                </v-layout>
                <v-layout wrap>
                    <v-flex
                            pa-1
                    >
                        <v-card
                                dark
                                color="green darken-1"
                        >
                            <v-card-text>I'm a Flex that will grow and shrink (default behavior)</v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex
                            grow
                            pa-1
                    >
                        <v-card
                                dark
                                color="green lighten-1"
                        >
                            <v-card-text>I'm a Flex with a lot of content that will NOT shrink when the content is wider
                                than
                                the available width in the row. Try resizing the window
                            </v-card-text>
                        </v-card>
                    </v-flex>
                </v-layout>
                <v-layout wrap>
                    <v-flex
                            pa-1
                    >
                        <v-card
                                dark
                                color="green darken-4"
                        >
                            <v-card-text>I'm a Flex that will grow and shrink (default behavior)</v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex
                            shrink
                            pa-1
                    >
                        <v-card
                                dark
                                color="green darken-3"
                        >
                            <v-card-text>I'm a Flex that will NOT grow</v-card-text>
                        </v-card>
                    </v-flex>
                </v-layout>
                <v-layout wrap>
                    <v-flex
                            grow-shrink-0
                            pa-1
                    >
                        <v-card
                                dark
                                color="green"
                        >
                            <v-card-text>I'm a Flex that will NOT grow OR shrink</v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex
                            grow-shrink-0
                            pa-1
                    >
                        <v-card
                                dark
                                color="green lighten-1"
                        >
                            <v-card-text>I'm a Flex that will NOT grow OR shrink</v-card-text>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </template>
        <template>
            <v-container fluid>
                <v-layout column>
                    <v-flex xs12>
                        <div class="resultContainer">
                            <v-layout v-bind="layoutAttributes">
                                <div class="item elevation-5"></div>
                                <div class="item elevation-5"></div>
                                <div class="item elevation-5"></div>
                            </v-layout>
                        </div>
                    </v-flex>
                    <v-flex xs12>
                        <v-layout xs12 wrap>
                            <v-flex xs12 md4>
                                <v-radio-group v-model="alignment">
                                    <v-radio
                                            v-for="n in alignmentsAvailable"
                                            :key="n"
                                            :label="n === '' ? 'Nothing' : n"
                                            :value="n"
                                    ></v-radio>
                                </v-radio-group>
                            </v-flex>
                            <v-flex xs12 md4>
                                <v-radio-group v-model="justify">
                                    <v-radio
                                            v-for="n in justifyAvailable"
                                            :key="n"
                                            :label="n === '' ? 'Nothing' : n"
                                            :value="n"
                                    ></v-radio>
                                </v-radio-group>
                            </v-flex>
                            <v-flex xs12 md4>
                                <v-layout column>
                                    <v-radio-group v-model="flexDirection">
                                        <v-checkbox
                                                v-model="reverse"
                                                label="reverse"
                                                hide-details
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="fillHeight"
                                                label="fill-height"
                                                hide-details
                                        ></v-checkbox>
                                        <v-radio
                                                v-for="n in flexDirectionAvailable"
                                                :key="n"
                                                :label="n === '' ? 'Nothing' : n"
                                                :value="n"
                                        ></v-radio>
                                    </v-radio-group>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex xs12>
                        <h5>Output:</h5>
                        <code>{{ formatAttributes(layoutAttributes) }}</code>
                    </v-flex>
                </v-layout>
            </v-container>
        </template>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data: () => ({
            lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`,
            alignmentsAvailable: ['align-center', 'align-end', 'align-space-around', 'align-space-between', 'align-start', ''],
            alignment: 'align-center',
            alignmentsContentAvailable: ['align-content-center', 'align-content-end', 'align-content-space-around', 'align-content-space-between', 'align-content-start', ''],
            justifyAvailable: ['justify-center', 'justify-end', 'justify-space-around', 'justify-space-between', 'justify-start', ''],
            justify: 'justify-center',
            reverse: false,
            flexDirectionAvailable: ['row', 'column', ''],
            flexDirection: 'row',
            fillHeight: true,
        }),
        computed: {
            layoutAttributes () {
                return {
                    [this.alignment]: true,
                    [this.justify]: true,
                    [this.flexDirection]: true,
                    reverse: this.reverse,
                    'fill-height': this.fillHeight,
                }
            },
        },
        methods: {
            formatAttributes (attributes) {
                const attributeArray = []
                for (const key in attributes) {
                    if (!attributes.hasOwnProperty(key) || key === '' || attributes[key] === false) continue
                    attributeArray.push(key.trim())
                }
                return `<v-layout ${attributeArray.join(' ')}/>`
            },
        }
    }
</script>

<style scoped>
    .resultContainer {
        height: 350px;
    }

    .item {
        min-height: 50px;
        min-width: 80px;
        margin: 10px;
    }
</style>
